// @import "./_themes.scss";
@import '@/styles/_themes.scss';

// 从主题色map中取出对应颜色
@function themed($key) {
  @return map-get($theme-map, $key);
}

// 切换主题时 获取不同的主题色值
@mixin themeify {
    @each $theme-name, $theme-map in $themes {
      // !global 把局部变量强升为全局变量
      $theme-map: $theme-map !global;
      $theme-name:$theme-name!global;
      // 判断html的data-theme的属性值  #{}是sass的插值表达式
      // & sass嵌套里的父容器标识   @content是混合器插槽，像vue的slot
      [data-theme="#{$theme-name}"] & {
        @content;
      }
    }
  }
  
  // 获取渐变背景色
  @mixin gradient_background($start-color, $end-color) {
    @include themeify {
      background: linear-gradient(
        to bottom,
        themed($start-color),
        themed($end-color)
      ) !important;
      transition: background-position 0.6s;
    }
  }
  
  // 获取背景颜色
  @mixin background_color($color:'bg-color') {
    @include themeify {
      background-color: themed($color) !important;
    }
  }
  
  // 获取字体颜色
  @mixin font_color($color:'font-color') {
    @include themeify {
      color: themed($color) !important;
    }
  }

  /* 获取字体hover */
  @mixin font_color_hover($color:'font-color-hover') {
    @include themeify {
      color: themed($color) !important;
    }
  }


  // 获取边框颜色
  @mixin border_color($color) {
    @include themeify {
      border-color: themed($color) !important;
    }
  }
